fix(nx-dev): add data-document attribute to improve search (#30524)

nx-dev/ui-cloud/src/lib/layout.tsx

@@ -18,7 +18,9 @@ export function Layout({
             }}
           />
         </div>
-        <main className="py-24 sm:py-32">{children}</main>
+        <main className="py-24 sm:py-32" data-document="main">
+          {children}
+        </main>
       </div>
     </div>
   );

nx-dev/ui-common/src/lib/default-layout.tsx

@@ -31,7 +31,10 @@ export function DefaultLayout({
             }}
           />
         </div>
-        <main className={isHome || hideHeader ? '' : 'py-24 sm:py-32'}>
+        <main
+          data-document="main"
+          className={isHome || hideHeader ? '' : 'py-24 sm:py-32'}
+        >
           {children}
         </main>
       </div>

nx-dev/ui-common/src/lib/headers/documentation-header.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { Fragment, ReactElement } from 'react';
+import { Fragment, type MouseEvent, ReactElement } from 'react';
 import { NxCloudAnimatedIcon, NxIcon } from '@nx/nx-dev/ui-icons';
 import {
   Bars3Icon,
@@ -74,6 +74,11 @@ export function DocumentationHeader({
     !isChangelog &&
     !isAiChat;
 
+  const handleContextMenu = (e: MouseEvent) => {
+    e.preventDefault();
+    router.push('/brands');
+  };
+
   const sections = [
     { name: 'Nx', href: '/getting-started/intro', current: isNx },
     {
@@ -217,8 +222,11 @@ export function DocumentationHeader({
             href="/"
             className="flex flex-grow items-center px-4 text-slate-900 lg:px-0 dark:text-white"
             prefetch={false}
+            onContextMenu={handleContextMenu}
           >
-            <span className="sr-only">Nx</span>
+            <span className="sr-only">
+              Nx – Left-click: Home. Right-click: Brands.
+            </span>
             <NxIcon aria-hidden="true" className="h-8 w-8" />
           </Link>
           <Link

nx-dev/ui-common/src/lib/headers/header.tsx

@@ -17,13 +17,20 @@ import {
 } from '@heroicons/react/24/outline';
 import cx from 'classnames';
 import Link from 'next/link';
-import { Fragment, ReactElement, useEffect, useState } from 'react';
+import {
+  Fragment,
+  type MouseEvent,
+  ReactElement,
+  useEffect,
+  useState,
+} from 'react';
 import { ButtonLink, ButtonLinkProps } from '../button';
 import { resourceMenuItems } from './menu-items';
 import { MobileMenuItem } from './mobile-menu-item';
 import { SectionsMenu } from './sections-menu';
 import { AlgoliaSearch } from '@nx/nx-dev/feature-search';
 import { GitHubIcon, NxIcon } from '@nx/nx-dev/ui-icons';
+import { useRouter } from 'next/navigation';
 
 interface HeaderProps {
   ctaButtons?: ButtonLinkProps[];
@@ -32,6 +39,13 @@ interface HeaderProps {
 export function Header({ ctaButtons }: HeaderProps): ReactElement {
   let [isOpen, setIsOpen] = useState(false);
 
+  const router = useRouter();
+
+  const handleContextMenu = (e: MouseEvent) => {
+    e.preventDefault();
+    router.push('/brands');
+  };
+
   // We need to close the popover if the route changes or the window is resized to prevent the popover from being stuck open.
   const checkSizeAndClosePopover = () => {
     const breakpoint = 1024; // This is the standard Tailwind lg breakpoint value
@@ -78,8 +92,11 @@ export function Header({ ctaButtons }: HeaderProps): ReactElement {
             href="/"
             className="mr-4 flex items-center text-slate-900 dark:text-white"
             prefetch={false}
+            onContextMenu={handleContextMenu}
           >
-            <span className="sr-only">Nx</span>
+            <span className="sr-only">
+              Nx – Left-click: Home. Right-click: Brands.
+            </span>
             <NxIcon aria-hidden="true" className="h-8 w-8" />
           </Link>
           <nav

nx-dev/ui-company/src/lib/layout.tsx

@@ -21,7 +21,9 @@ export function Layout({
             }}
           />
         </div>
-        <main className="py-24 sm:py-32">{children}</main>
+        <main className="py-24 sm:py-32" data-document="main">
+          {children}
+        </main>
       </div>
       <Footer />
     </div>

nx-dev/ui-enterprise/src/lib/enterprise-layout.tsx

@@ -7,7 +7,7 @@ export function EnterpriseLayout({
   return (
     <div className="w-full dark:bg-slate-950">
       <Header />
-      <main>{children}</main>
+      <main data-document="main">{children}</main>
       <Footer />
     </div>
   );