docs: Fix docs issues (#9021)

* Hide error page from side nav

* Set cache control headers in azure

* Fix og image paths

* Fix link clicks outside public url

* add missing vanilla css dep

* Fix og image paths

* use environment variable for public url?

---------

Co-authored-by: Daniel Lu <dl1644@gmail.com>

Author: devongovett

.circleci/config.yml

@@ -816,9 +816,10 @@ jobs:
       - run:
           name: deploy
           command: |
-            azcopy copy "/tmp/dist/production/docs/*" "https://reactspectrum.blob.core.windows.net/\$web${AZURE_STORAGE_SAS_TOKEN}" --recursive --exclude-pattern "*.md;*.txt"
-            azcopy copy "/tmp/dist/production/docs/*" "https://reactspectrum.blob.core.windows.net/\$web${AZURE_STORAGE_SAS_TOKEN}" --recursive --include-pattern "*.md" --content-type "text/markdown; charset=utf-8"
-            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"
+            azcopy copy "/tmp/dist/production/docs/*" "https://reactspectrum.blob.core.windows.net/\$web${AZURE_STORAGE_SAS_TOKEN}" --recursive --exclude-pattern "*.md;*.txt;*.html;*.rsc"
+            azcopy copy "/tmp/dist/production/docs/*" "https://reactspectrum.blob.core.windows.net/\$web${AZURE_STORAGE_SAS_TOKEN}" --recursive --include-pattern "*.md" --content-type "text/markdown; 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 "*.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"
 
   comment:
     executor: rsp

Makefile

@@ -146,16 +146,16 @@ s2-api-diff:
 	node scripts/api-diff.js --skip-same --skip-style-props
 
 s2-docs:
-	BASE_URL=https://reactspectrum.blob.core.windows.net PUBLIC_URL=/reactspectrum/$$(git rev-parse HEAD)/s2-docs DIST_DIR=dist/$$(git rev-parse HEAD)/s2-docs $(MAKE) build-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
 
 s2-docs-production:
-	BASE_URL=https://react-spectrum.adobe.com PUBLIC_URL=/beta DIST_DIR=dist/production/docs/beta $(MAKE) build-s2-docs
+	PUBLIC_URL=https://react-spectrum.adobe.com/beta DIST_DIR=dist/production/docs/beta $(MAKE) build-s2-docs
 
 build-s2-docs:
 	yarn workspace @react-spectrum/s2-docs generate:md
 	yarn workspace @react-spectrum/s2-docs generate:og
-	REGISTRY_URL=$(BASE_URL)$(PUBLIC_URL)/registry node scripts/buildRegistry.mjs
-	REGISTRY_URL=$(BASE_URL)$(PUBLIC_URL)/registry yarn build:s2-docs --public-url $(PUBLIC_URL)
+	REGISTRY_URL=$(PUBLIC_URL)/registry node scripts/buildRegistry.mjs
+	REGISTRY_URL=$(PUBLIC_URL)/registry yarn build:s2-docs --public-url $(PUBLIC_URL)
 	mkdir -p $(DIST_DIR)
 	mv packages/dev/s2-docs/dist/* $(DIST_DIR)
 	mkdir -p $(DIST_DIR)/registry

packages/dev/s2-docs/src/CodeSandbox.tsx

@@ -38,7 +38,8 @@ const dependencies = {
     'react-aria-components': '^1.10.0',
     react: '^19',
     'react-dom': '^19',
-    'lucide-react': '^0.514.0'
+    'lucide-react': '^0.514.0',
+    'clsx': '^2.1.1'
   },
   tailwind: {
     'react-aria-components': '^1.10.0',

packages/dev/s2-docs/src/Layout.tsx

@@ -64,16 +64,11 @@ const getTitle = (currentPage: Page): string => {
 };
 
 const getOgImageUrl = (currentPage: Page): string => {
-  const slug = currentPage.url.replace(/^\//, '').replace(/\.html$/, '');
-  
-  if (slug.includes('s2-docs/')) {
-    // For build links, use the full URL
-    const ogPath = slug.replace(/s2-docs\//, 's2-docs/og/');
-    return `https://reactspectrum.blob.core.windows.net/${ogPath}.png`;
+  let publicUrl = process.env.PUBLIC_URL || '/';
+  if (!publicUrl.endsWith('/')) {
+    publicUrl += '/';
   }
-  
-  // For production, use relative path with /og/ prefix
-  return `/og/${slug}.png`;
+  return publicUrl + 'og/' + currentPage.url.replace(publicUrl, '').replace(/\.html$/, '.png');
 };
 
 const getDescription = (currentPage: Page): string => {

packages/dev/s2-docs/src/Nav.tsx

@@ -11,7 +11,7 @@ export function Nav({pages, currentPage}: PageProps) {
   let currentLibrary = getLibraryFromPage(currentPage);
   let sections = new Map();
   for (let page of pages) {
-    if (page.exports?.hideNav) {
+    if (page.exports?.hideNav || page.exports?.hideFromSearch) {
       continue;
     }
 

packages/dev/s2-docs/src/client.tsx

@@ -49,6 +49,8 @@ async function navigate(pathname: string, push = false) {
 // Intercept link clicks to perform RSC navigation.
 document.addEventListener('click', e => {
   let link = (e.target as Element).closest('a');
+  let publicUrl = process.env.PUBLIC_URL || '/';
+  let publicUrlPathname = publicUrl.startsWith('http') ? new URL(publicUrl).pathname : publicUrl;
   if (
     link &&
     link instanceof HTMLAnchorElement &&
@@ -57,6 +59,7 @@ document.addEventListener('click', e => {
     link.origin === location.origin &&
     link.pathname !== location.pathname &&
     !link.hasAttribute('download') &&
+    link.pathname.startsWith(publicUrlPathname) &&
     e.button === 0 && // left clicks only
     !e.metaKey && // open in new tab (mac)
     !e.ctrlKey && // open in new tab (windows)