docs: Update URL structure (#9237)

Author: devongovett

.circleci/comment.js

@@ -61,7 +61,9 @@ async function run() {
       [Size diff since last release](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/size-diff.txt)
       [Docs](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/docs/index.html)
       [Storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html?path=/story/accordion--default)
-      [S2 Storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-s2/index.html)`
+      [S2 Storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-s2/index.html)
+      [S2 docs](https://d1pzu54gtk2aed.cloudfront.net/main/${process.env.CIRCLE_SHA1}/)
+      [React Aria docs](https://d5iwopk28bdhl.cloudfront.net/main/${process.env.CIRCLE_SHA1}/)`
         });
       }
     } catch (error) {
@@ -81,8 +83,9 @@ async function run() {
 
   * [View the storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html?path=/story/accordion--default)
   * [View the S2 storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-s2/index.html)
-  * [View the documentation](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/docs/index.html)
-  * [View the S2 docs](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/s2-docs/index.html)`
+  * [View the v3 docs](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/docs/index.html)
+  * [View the S2 docs](https://d1pzu54gtk2aed.cloudfront.net/pr/${process.env.CIRCLE_SHA1}/)
+  * [View the React Aria docs](https://d5iwopk28bdhl.cloudfront.net/pr/${process.env.CIRCLE_SHA1}/)`
       });
     } catch (err) {
       console.error(err);

.circleci/config.yml

@@ -13,6 +13,10 @@ parameters:
     type: string
     default: ""
 
+orbs:
+  aws-cli: circleci/aws-cli@5.4.1
+  aws-s3: circleci/aws-s3@4.1
+
 executors:
   rsp:
     docker:
@@ -45,6 +49,30 @@ executors:
       CACHE_VERSION: v1
     working_directory: ~/react-spectrum
 
+commands:
+  deploy-s3:
+    parameters:
+      dir:
+        type: string
+      bucket:
+        type: string
+    steps:
+      - attach_workspace:
+          at: /tmp/dist
+      - aws-cli/install
+      - aws-s3/sync:
+          arguments: --cache-control public,max-age=300,stale-while-revalidate=300 --exclude * --include *.html --include *.txt --include *.json --include *.md --include *.xml
+          from: /tmp/dist/s2-docs/<< parameters.dir >>
+          to: << parameters.bucket >>
+      - aws-s3/sync:
+          arguments: --cache-control public,max-age=300,stale-while-revalidate=300 --content-type text/x-component;charset=utf-8 --exclude * --include *.rsc
+          from: /tmp/dist/s2-docs/<< parameters.dir >>
+          to: << parameters.bucket >>
+      - aws-s3/sync:
+          arguments: --cache-control public,max-age=31536000,immutable --include * --exclude *.html --exclude *.rsc --exclude *.txt --exclude *.json --exclude *.md --exclude *.xml
+          from: /tmp/dist/s2-docs/<< parameters.dir >>
+          to: << parameters.bucket >>
+
 jobs:
   install:
     executor: rsp-large
@@ -480,35 +508,35 @@ jobs:
           paths:
             - '*/docs/'
 
-  docs-beta:
+  s2-docs:
     executor: rsp-xlarge
     steps:
       - restore_cache:
           key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
 
       - run:
-          name: build docs
-          command: make s2-docs-production
+          name: build s2 docs
+          command: make s2-docs
 
       - persist_to_workspace:
           root: dist
           paths:
-            - '*/docs/'
+            - 's2-docs/'
 
-  s2-docs:
+  s2-docs-production:
     executor: rsp-xlarge
     steps:
       - restore_cache:
           key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
 
       - run:
           name: build s2 docs
-          command: make s2-docs
+          command: make s2-docs-production
 
       - persist_to_workspace:
           root: dist
           paths:
-            - '*/s2-docs/'
+            - 's2-docs/'
 
   verdaccio:
     executor: rsp-xlarge
@@ -823,6 +851,16 @@ jobs:
             azcopy copy "/tmp/dist/production/docs/*" "https://reactspectrum.blob.core.windows.net/\$web${AZURE_STORAGE_SAS_TOKEN}" --recursive --include-pattern "*.txt" --content-type "text/plain; charset=utf-8" --cache-control "max-age=300"
             azcopy copy "/tmp/dist/production/docs/*" "https://reactspectrum.blob.core.windows.net/\$web${AZURE_STORAGE_SAS_TOKEN}" --recursive --include-pattern "*.html;*.rsc" --cache-control "max-age=300"
 
+  deploy-s3-stage:
+    executor: rsp
+    steps:
+      - deploy-s3:
+          dir: react-aria
+          bucket: s3://react-aria-stage
+      - deploy-s3:
+          dir: s2
+          bucket: s3://react-spectrum-stage
+
   comment:
     executor: rsp
     steps:
@@ -934,6 +972,12 @@ workflows:
       - s2-docs:
           requires:
             - install
+      - s2-docs-production:
+          requires:
+            - install
+          filters:
+            branches:
+              only: main
       - verdaccio:
           filters:
             branches:
@@ -988,7 +1032,21 @@ workflows:
             - storybook
             - storybook-s2
             - docs
+      - deploy-s3-stage:
+          name: deploy-s3-commit
+          requires:
             - s2-docs
+          filters:
+            branches:
+              ignore: main
+      - deploy-s3-stage:
+          name: deploy-s3-main
+          requires:
+            - s2-docs
+            - s2-docs-production
+          filters:
+            branches:
+              only: main
       - deploy-verdaccio:
           requires:
             - v-docs
@@ -1009,6 +1067,7 @@ workflows:
           requires:
             - ts-diff
             - deploy
+            - deploy-s3-commit
       - comment:
           name: comment-verdaccio
           requires:
@@ -1036,26 +1095,6 @@ workflows:
           requires:
             - docs-production
 
-
-  beta-docs:
-    when:
-      and:
-        - equal: [ "beta-docs", << pipeline.parameters.GHA_Action >> ]
-    jobs:
-      - install
-      - docs-beta:
-          filters:
-            branches:
-              only: beta-docs
-          requires:
-            - install
-      - deploy-production:
-          filters:
-            branches:
-              only: beta-docs
-          requires:
-            - docs-beta
-
   nightly:
     triggers:
       - schedule:

Makefile

@@ -2,6 +2,9 @@
 
 SHELL := /bin/bash
 PATH := ./node_modules/.bin:$(PATH)
+BRANCH := $(or $(CIRCLE_BRANCH),$(shell git rev-parse --abbrev-ref HEAD))
+BRANCH_TYPE := $(if $(filter $(BRANCH),main),main,pr)
+HASH := $(shell git rev-parse HEAD)
 
 all: node_modules
 
@@ -146,19 +149,25 @@ s2-api-diff:
 	node scripts/api-diff.js --skip-same --skip-style-props
 
 s2-docs:
-	PUBLIC_URL=https://reactspectrum.blob.core.windows.net/reactspectrum/$$(git rev-parse HEAD)/s2-docs DIST_DIR=dist/$$(git rev-parse HEAD)/s2-docs $(MAKE) build-s2-docs
+	DOCS_ENV=stage PUBLIC_URL=/$(BRANCH_TYPE)/$(HASH) $(MAKE) build-s2-docs
+	cp packages/dev/docs/pages/disallow-robots.txt dist/s2-docs/react-aria/$(BRANCH_TYPE)/$(HASH)/robots.txt
+	cp packages/dev/docs/pages/disallow-robots.txt dist/s2-docs/s2/$(BRANCH_TYPE)/$(HASH)/robots.txt
 
 s2-docs-production:
-	PUBLIC_URL=https://react-spectrum.adobe.com/beta DIST_DIR=dist/production/docs/beta $(MAKE) build-s2-docs
+	DOCS_ENV=prod PUBLIC_URL=/ $(MAKE) build-s2-docs
+	cp packages/dev/docs/pages/robots.txt dist/s2-docs/react-aria/robots.txt
+	cp packages/dev/docs/pages/robots.txt dist/s2-docs/s2/robots.txt
 
 build-s2-docs:
 	yarn workspace @react-spectrum/s2-docs generate:md
 	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/buildRegistry.mjs
+	yarn build:s2-docs
 	node scripts/createFeedS2.mjs
-	mkdir -p $(DIST_DIR)
-	mv packages/dev/s2-docs/dist/* $(DIST_DIR)
-	mkdir -p $(DIST_DIR)/registry
-	mv starters/docs/registry $(DIST_DIR)/registry/vanilla
-	mv starters/tailwind/registry $(DIST_DIR)/registry/tailwind
+	mkdir -p dist/s2-docs/react-aria/$(PUBLIC_URL)
+	mkdir -p dist/s2-docs/s2/$(PUBLIC_URL)
+	mv packages/dev/s2-docs/dist/react-aria/* dist/s2-docs/react-aria/$(PUBLIC_URL)
+	mv packages/dev/s2-docs/dist/s2/* dist/s2-docs/s2/$(PUBLIC_URL)
+	mkdir -p dist/s2-docs/react-aria/$(PUBLIC_URL)/registry
+	mv starters/docs/registry dist/s2-docs/react-aria/$(PUBLIC_URL)/registry/vanilla
+	mv starters/tailwind/registry dist/s2-docs/react-aria/$(PUBLIC_URL)/registry/tailwind

packages/dev/s2-docs/.parcelrc-s2-docs

@@ -1,6 +1,6 @@
 {
   "extends": "@parcel/config-default",
-  "resolvers": ["@react-aria/parcel-resolver-optimize-locales", "@parcel/resolver-glob", "parcel-resolver-docs", "..."],
+  "resolvers": ["@react-aria/parcel-resolver-optimize-locales", "@parcel/resolver-glob", "./S2DocsResolver", "parcel-resolver-docs", "..."],
   "transformers": {
     "docs:*.{js,ts,tsx,json}": ["parcel-transformer-docs", "@parcel/transformer-inline"],
     "docs-json:*.{js,ts,tsx,json}": ["parcel-transformer-docs"],

packages/dev/s2-docs/S2DocsResolver.js

@@ -0,0 +1,10 @@
+const {Resolver} = require('@parcel/plugin');
+
+module.exports = new Resolver({
+  resolve({dependency}) {
+    // Ignore URL dependencies in MDX files.
+    if (dependency.sourcePath?.endsWith('.mdx') && dependency.isOptional) {
+      return {isExcluded: true};
+    }
+  }
+});

packages/dev/s2-docs/package.json

@@ -3,14 +3,17 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "start": "DOCS_ENV=dev parcel --config .parcelrc-s2-docs",
-    "build": "DOCS_ENV=staging parcel build --config .parcelrc-s2-docs",
+    "start": "parcel 'pages/**/*.mdx' --config .parcelrc-s2-docs",
+    "start:s2": "DOCS_ENV=dev LIBRARY=s2 parcel 'pages/s2/**/*.mdx' -p 4321 --config .parcelrc-s2-docs --dist-dir dist/s2 --cache-dir ../../../.parcel-cache/s2",
+    "start:react-aria": "DOCS_ENV=dev LIBRARY=react-aria parcel 'pages/react-aria/**/*.mdx' -p 1234 --config .parcelrc-s2-docs --dist-dir dist/react-aria --cache-dir ../../../.parcel-cache/react-aria",
+    "build": "yarn build:s2 --public-url $PUBLIC_URL && yarn build:react-aria --public-url $PUBLIC_URL",
+    "build:s2": "LIBRARY=s2 parcel build 'pages/s2/**/*.mdx' --config .parcelrc-s2-docs --dist-dir dist/s2 --cache-dir ../../../.parcel-cache/s2",
+    "build:react-aria": "LIBRARY=react-aria parcel build 'pages/react-aria/**/*.mdx' --config .parcelrc-s2-docs --dist-dir dist/react-aria --cache-dir ../../../.parcel-cache/react-aria",
     "generate:og": "node scripts/generateOGImages.mjs",
     "generate:md": "node scripts/generateMarkdownDocs.mjs"
   },
   "targets": {
     "react-static": {
-      "source": "pages/**/*.mdx",
       "context": "react-server",
       "engines": {
         "browsers": [
@@ -22,7 +25,8 @@
       "includeNodeModules": {
         "tree-sitter-highlight": false,
         "json5": false,
-        "globals-docs": false
+        "globals-docs": false,
+        "@parcel/rust": false
       }
     }
   },

packages/dev/s2-docs/pages/WelcomeHeader.tsx

@@ -41,7 +41,7 @@ export function LibraryCards() {
           <Text slot="description">{TAB_DEFS['react-spectrum'].description}</Text>
         </Content>
         <Footer>
-          <LinkButton href="s2/index.html" variant="accent">Get started</LinkButton>
+          <LinkButton href="s2/" variant="accent">Get started</LinkButton>
         </Footer>
       </ProductCard>
 
@@ -52,7 +52,7 @@ export function LibraryCards() {
           <Text slot="description">{TAB_DEFS['react-aria'].description}</Text>
         </Content>
         <Footer>
-          <LinkButton href="react-aria/Autocomplete.html" variant="accent">Explore</LinkButton>
+          <LinkButton href="react-aria/" variant="accent">Explore</LinkButton>
         </Footer>
       </ProductCard>
 
@@ -63,7 +63,7 @@ export function LibraryCards() {
           <Text slot="description">{TAB_DEFS['internationalized'].description}</Text>
         </Content>
         <Footer>
-          <LinkButton href="internationalized/date/index.html" variant="accent">Show Packages</LinkButton>
+          <LinkButton href="internationalized/date/" variant="accent">Show Packages</LinkButton>
         </Footer>
       </ProductCard>
     </div>

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

@@ -16,7 +16,7 @@ The React Spectrum docs have a new look! This is a **beta preview** so keep in m
 ## What's new?
 
 - Docs for [Spectrum 2](https://s2.spectrum.adobe.com) components
-- New docs for [React Aria](react-aria/Autocomplete.html) and [Internationalized](internationalized/date/index.html)
+- New docs for [React Aria](react-aria/Autocomplete) and [Internationalized](internationalized/date/)
 - A new search menu experience
 - Interactive controls for examples
 - New concept guides
@@ -25,4 +25,4 @@ The React Spectrum docs have a new look! This is a **beta preview** so keep in m
 
 ## Roadmap
 
-The existing docs are still available [here](https://react-spectrum.adobe.com/index.html). We plan to do a full release of the new docs site by early 2026, so we welcome any and all feedback!
+The existing docs are still available [here](https://react-spectrum.adobe.com/). We plan to do a full release of the new docs site by early 2026, so we welcome any and all feedback!

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

@@ -111,9 +111,9 @@ export const description = 'Allows users to search or filter a list of suggestio
 
 ## Content
 
-Autocomplete filters a collection component using a [TextField](TextField.html) or [SearchField](SearchField.html). It can be used to build UI patterns such as command palettes, searchable menus, filterable selects, and more.
+Autocomplete filters a collection component using a [TextField](TextField) or [SearchField](SearchField). It can be used to build UI patterns such as command palettes, searchable menus, filterable selects, and more.
 
-[Menu](Menu.html) and [ListBox](ListBox.html) support **virtual focus**, which allows arrow key navigation within the list while the text input is focused. Use `disableVirtualFocus` to require the user to tab between the input and list.
+[Menu](Menu) and [ListBox](ListBox) support **virtual focus**, which allows arrow key navigation within the list while the text input is focused. Use `disableVirtualFocus` to require the user to tab between the input and list.
 
 <ExampleSwitcher type="component" examples={['Menu', 'Select', 'ListBox', 'TagGroup', 'GridList', 'Table']}>
 
@@ -1108,7 +1108,7 @@ function AsyncLoadingExample() {
 
 ## API
 
-```tsx links={{Autocomplete: '#autocomplete', SearchField: 'SearchField.html', TextField: 'TextField.html', Menu: 'Menu.html', ListBox: 'ListBox.html', TagGroup: 'TagGroup.html', GridList: 'GridList.html', Table: 'Table.html'}}
+```tsx links={{Autocomplete: '#autocomplete', SearchField: 'SearchField', TextField: 'TextField', Menu: 'Menu', ListBox: 'ListBox', TagGroup: 'TagGroup', GridList: 'GridList', Table: 'Table'}}
 <Autocomplete>
   <SearchField /> or <TextField />
   <Menu />, <ListBox />, <TagGroup />, <GridList />, or <Table />

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

@@ -41,7 +41,7 @@ export const description = 'Displays a hierarchy of links to the current page or
 
 ## Content
 
-`Breadcrumbs` follows the [Collection Components API](collections.html?component=Breadcrumbs), accepting both static and dynamic collections. This example shows a dynamic collection, passing a list of objects to the `items` prop, and a function to render the children. The `onAction` event is called when a user presses a breadcrumb.
+`Breadcrumbs` follows the [Collection Components API](collections?component=Breadcrumbs), accepting both static and dynamic collections. This example shows a dynamic collection, passing a list of objects to the `items` prop, and a function to render the children. The `onAction` event is called when a user presses a breadcrumb.
 
 ```tsx render
 "use client";
@@ -80,7 +80,7 @@ function Example() {
 
 <Anatomy />
 
-```tsx links={{Breadcrumbs: '#breadcrumbs', Breadcrumb: '#breadcrumb', Link: 'Link.html'}}
+```tsx links={{Breadcrumbs: '#breadcrumbs', Breadcrumb: '#breadcrumb', Link: 'Link'}}
 <Breadcrumbs>
   <Breadcrumb>
     <Link />