docs: Homepage updates and fixes (#9344)

* Replace process.env.DOCS_ENV in build

* Fix Image objectFit and objectPosition styles with picture wrapper

* A few tailwind example app fixes

* Fix copying folded code

* Fix header flickering during toast view transition

* Preload card images when hovering tag in search menu

* Merge internationalized into React Aria in search

* Update home page headers

* Update logo

* Fix DOCS_ENV in development

* Fix typescript

* lint

* Fix internationalized nav

* Fix skeleton showing when clicking links on home page

* Order guides above interactions in nav

* Make home page header line up with other pages

* Fix some tailwind css conflicts between home page and other pages

* Adjust size of logos in mobile search menu

* Fix library in AI prompt

* Sort getting started to the top

* Slight improvements

* Re-title internationalized intro pages

* Updates for testing

* Improve background on mobile

* Fix focus ring on component links

* Update logo and favicon

* Delay pre-fetching until after view transitions

* Fix colors

* Update video

* Update react aria open graph image

Author: devongovett

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

@@ -17,6 +17,7 @@ import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {Image} from './Image';
+import {isDocsEnv} from './macros' with {type: 'macro'};
 import {style} from '../style' with { type: 'macro' };
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -77,7 +78,7 @@ export const Avatar = forwardRef(function Avatar(props: AvatarProps, ref: DOMRef
   const domProps = filterDOMProps(otherProps);
 
   // In the docs build, we need to be able to simulate font scaling.
-  let remSize = process.env.DOCS_ENV ? `calc(${size / 16} * var(--rem, 1rem))` : `${size / 16}rem`;
+  let remSize = isDocsEnv() ? `calc(${size / 16} * var(--rem, 1rem))` : `${size / 16}rem`;
   let isLarge = size >= 64;
   return (
     <Image

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

@@ -310,7 +310,7 @@ export const Image = forwardRef(function Image(props: ImageProps, domRef: Forwar
 
     if (Array.isArray(srcProp)) {
       img = (
-        <picture>
+        <picture className={style({objectFit: 'inherit', objectPosition: 'inherit'})}>
           {srcProp.map((source, i) => {
             let {colorScheme: sourceColorScheme, ...sourceProps} = source;
             if (sourceColorScheme) {

packages/@react-spectrum/s2/src/macros.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export function isDocsEnv(): boolean {
+  return !!process.env.DOCS_ENV;
+}

packages/dev/docs/pages/react-aria/home/ExampleApp.tsx

@@ -209,7 +209,7 @@ export function ExampleApp(): React.ReactNode {
         </DialogTrigger>
         <MenuTrigger>
           <TooltipTrigger>
-            <Button aria-label="Columns" variant="secondary" className="!h-9 shrink-0 p-0 hidden sm:inline-flex">
+            <Button aria-label="Columns" variant="secondary" className="!w-9 !h-9 shrink-0 p-0 hidden sm:inline-flex">
               <SlidersIcon aria-hidden className="block w-5 h-5" />
             </Button>
             <Tooltip>Columns</Tooltip>
@@ -222,7 +222,7 @@ export function ExampleApp(): React.ReactNode {
           </Menu>
         </MenuTrigger>
         <DialogTrigger>
-          <Button aria-label="Add plant" variant="secondary" className="!h-9 shrink-0 p-0 col-start-5">
+          <Button aria-label="Add plant" variant="secondary" className="!w-9 !h-9 shrink-0 p-0 col-start-5">
             <PlusIcon aria-hidden className="block w-5 h-5" />
           </Button>
           <PlantModal>
@@ -506,7 +506,7 @@ function PlantModal(props: ModalOverlayProps) {
       // Use position: absolute instead of fixed to avoid
       // being clipped to the "inner" viewport in iOS 26
       className={({isEntering, isExiting}) => `
-      absolute top-0 left-0 w-full h-(--page-height) isolate z-20 bg-black/[15%] backdrop-blur-lg
+      absolute top-0 left-0 w-full h-(--page-height) max-h-[5000px] isolate z-20 bg-black/[15%] backdrop-blur-lg
       ${isEntering ? 'animate-in fade-in duration-200 ease-out' : ''}
       ${isExiting ? 'animate-out fade-out duration-200 ease-in' : ''}
     `}>

packages/dev/docs/pages/react-aria/home/components.tsx

@@ -10,7 +10,9 @@
  * governing permissions and limitations under the License.
  */
 import {ArrowRight} from 'lucide-react';
+import {BaseLink} from '@react-spectrum/s2-docs/src/Link';
 import React, {ForwardedRef, HTMLAttributes, ReactNode} from 'react';
+import {twMerge} from 'tailwind-merge';
 
 export function Window({children, className = '', isBackground = false, toolbar}: {children: ReactNode, className?: string, isBackground?: boolean, toolbar: ReactNode}): ReactNode {
   return (
@@ -33,7 +35,7 @@ export function FileTab({children, className = ''}: {children: ReactNode, classN
 }
 
 export function AddressBar({children}: {children: ReactNode}): ReactNode {
-  return <div className="bg-gray-400/40 dark:bg-zinc-500/40 px-5 md:px-10 py-1 ml-20 sm:mx-auto my-2.5 rounded-md text-slate-600 dark:text-slate-300 text-xs">{children}</div>;
+  return <div className="bg-gray-400/40 dark:bg-zinc-500/40 px-5 md:px-10 py-1 ml-20 flex-1 text-center sm:flex-none sm:mx-auto my-2.5 rounded-md text-slate-600 dark:text-slate-300 text-xs">{children}</div>;
 }
 
 export function GradientText({children}: {children: ReactNode}): ReactNode {
@@ -74,7 +76,7 @@ export function Arrow({href, children, textX, x1, x2, points, y, marker = 'marke
         ? <polyline points={points} {...markerProps} className="stroke-slate-800 dark:stroke-white fill-none" />
         : <line x1={x1} y1={y} x2={x2} y2={y} {...markerProps} className="stroke-slate-800 dark:stroke-white" />
       }
-      <a href={href} target="_blank" className="pointer-events-auto outline-hidden rounded-xs focus:outline-blue-600 dark:focus:outline-blue-500 outline-offset-2"><text x={textX} y={y + 3} className="text-xs fill-slate-900 dark:fill-white underline">{children}</text></a>
+      <a href={href} target="_blank" className="pointer-events-auto outline-hidden rounded-xs outline-0 outline-solid focus-visible:outline-2 focus-visible:outline-black dark:focus-visible:outline-white outline-offset-2"><text x={textX} y={y + 3} className="text-xs fill-slate-900 dark:fill-white underline">{children}</text></a>
     </>
   );
 }
@@ -85,8 +87,8 @@ React.forwardRef((props: HTMLAttributes<HTMLDivElement>, ref: ForwardedRef<HTMLD
   return <div ref={ref} className="z-10 pointer-events-none absolute w-10 h-10 rounded-full border border-black/80 bg-black/80 dark:border-white/80 dark:bg-white/80 dark:mix-blend-difference opacity-0 [--hover-opacity:0.15] [--pressed-opacity:0.3] forced-colors:[--hover-opacity:0.5] forced-colors:[--pressed-opacity:1] forced-colors:bg-[Highlight]! forced-colors:mix-blend-normal!" {...props} />;
 });
 
-export function LearnMoreLink({href, className}: {href: string, className: string}): ReactNode {
-  return <a href={href} className={`group inline-block mt-6 mb-12 no-underline text-xl rounded-full px-4 -mx-4 py-1 transition focus-ring active:scale-95 ${className}`}>Learn more<ArrowRight aria-hidden className="inline w-5 h-5 align-middle ml-1 will-change-transform group-hover:translate-x-0.5 transition -mt-1" /></a>;
+export function LearnMoreLink({children, href, className}: {children?: string, href: string, className: string}): ReactNode {
+  return <BaseLink href={href} className={twMerge('group inline-block mt-6 mb-12 no-underline text-xl rounded-full px-4 -mx-4 py-1 transition focus-ring active:scale-95', className)}>{children || 'Learn more'}<ArrowRight aria-hidden className="inline w-5 h-5 align-middle ml-1 will-change-transform group-hover:translate-x-0.5 transition -mt-1" /></BaseLink>;
 }
 
 export function Scrollable({children, className = ''}: {children: ReactNode, className?: string}): ReactNode {