feat(nx-dev): update website header components (#21833)

nx-dev/feature-search/src/lib/algolia-search.tsx

@@ -75,7 +75,7 @@ export function AlgoliaSearch({
         <link
           rel="preconnect"
           href="https://PCTGM1JTQL-dsn.algolia.net"
-          crossOrigin="true"
+          crossOrigin="anonymous"
         />
       </Head>
       {!tiny ? (
@@ -86,9 +86,8 @@ export function AlgoliaSearch({
           className="flex w-full items-center rounded-md bg-white py-1.5 px-2 text-sm leading-4 ring-1 ring-slate-300 transition dark:bg-slate-700 dark:ring-slate-900"
         >
           <MagnifyingGlassIcon className="h-4 w-4 flex-none" />
-          <span className="mx-3 text-xs text-slate-300 dark:text-slate-400 md:text-sm lg:inline-flex">
+          <span className="mx-3 text-xs text-slate-300 dark:text-slate-400 md:text-sm inline-flex">
-            Search{' '}
+            Search <span className="ml-1 hidden md:inline">the docs ...</span>
-            <span className="ml-2 hidden md:inline">Documentation ...</span>
           </span>
           <span
             style={{ opacity: browserDetected ? '1' : '0' }}
@@ -138,7 +137,7 @@ export function AlgoliaSearch({
               distinct: true,
             }}
             initialQuery={initialQuery}
-            placeholder="Search documentation"
+            placeholder="Search the docs"
             initialScrollY={window.scrollY}
             onClose={handleClose}
             indexName="nx-production"

nx-dev/ui-common/src/index.ts

@@ -6,6 +6,7 @@ export * from './lib/champion-card';
 export * from './lib/champion-perks';
 export * from './lib/header';
 export * from './lib/flip-card';
+export * from './lib/nx-cloud-icon';
 export * from './lib/footer';
 export * from './lib/sidebar-container';
 export * from './lib/sidebar';

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

@@ -5,12 +5,17 @@ import { ThemeSwitcher } from '@nx/nx-dev/ui-theme';
 import cx from 'classnames';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { AnnouncementBanner } from './announcement-banner';
+import { ButtonLink } from './button';
+import { NxCloudIcon } from './nx-cloud-icon';
 
 function Menu({ tabs }: { tabs: any[] }): JSX.Element {
   return (
     <div className="hidden sm:block">
-      <nav className="-mb-px flex space-x-8" aria-label="Tabs">
+      <nav
+        role="documentation-nav"
+        aria-label="Tabs"
+        className="-mb-px flex gap-6"
+      >
         {tabs.map((tab) => (
           <Link
             key={tab.name}
@@ -23,7 +28,7 @@ function Menu({ tabs }: { tabs: any[] }): JSX.Element {
             )}
             aria-current={tab.current ? 'page' : undefined}
           >
-            {tab.content ?? tab.name}
+            {tab.name}
           </Link>
         ))}
       </nav>
@@ -85,11 +90,6 @@ export function DocumentationHeader({
       name: 'AI Chat',
       href: '/ai-chat',
       current: isAiChat,
-      content: (
-        <>
-          <span>AI Chat</span>
-        </>
-      ),
     },
   ];
 
@@ -166,7 +166,7 @@ export function DocumentationHeader({
 
   return (
     <div className="border-b border-slate-200 bg-slate-50 dark:border-slate-700 dark:bg-slate-800/60 print:hidden">
-      <div className="mx-auto flex w-full items-center sm:space-x-6 lg:py-4 lg:px-8">
+      <div className="mx-auto flex w-full items-center gap-6 lg:py-4 lg:px-8">
         {/*MOBILE MENU*/}
         <div className="flex w-full items-center lg:hidden">
           <button
@@ -221,16 +221,62 @@ export function DocumentationHeader({
           <AlgoliaSearch />
         </div>
         {/*NAVIGATION*/}
-        <div className="hidden flex-grow lg:flex">{/* SPACER */}</div>
-        <div className="hidden lg:flex">
-          <AnnouncementBanner />
-        </div>
         <div className="hidden flex-shrink-0 lg:flex">
           <nav
-            role="accessory-nav"
+            role="menu"
-            className="items-justified hidden justify-center space-x-4 text-xs lg:flex"
+            className="items-justified hidden justify-center space-x-2 text-sm lg:flex"
+          >
+            <h2 className="sr-only">Main navigation</h2>
+            <Link
+              href="/blog"
+              title="Blog"
+              className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 dark:text-slate-200 dark:hover:text-sky-500 md:inline-flex"
+            >
+              Blog
+            </Link>
+            <Link
+              href="/community"
+              title="Nx Community: Join us!"
+              className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 dark:text-slate-200 dark:hover:text-sky-500 md:inline-flex"
+            >
+              Community
+            </Link>
+            <Link
+              href="/launch-nx"
+              title="Launch Nx"
+              className="relative hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 dark:text-slate-200 dark:hover:text-sky-500 md:inline-flex"
+            >
+              {/*<span className="absolute top-0 right-0 -mt-1 -mr-1 flex h-3 w-3">*/}
+              {/*  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 dark:bg-sky-500" />*/}
+              {/*  <span className="relative inline-flex h-3 w-3 rounded-full bg-blue-500 dark:bg-sky-500" />*/}
+              {/*</span>*/}Launch Nx
+            </Link>
+            <a
+              href="https://nx.app/enterprise?utm_source=nx.dev&utm_medium=header-menu"
+              target="_blank"
+              title="Contact us"
+              className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 dark:text-slate-200 dark:hover:text-sky-500 md:inline-flex"
+            >
+              Contact us
+            </a>
+          </nav>
+        </div>
+        <div className="hidden flex-grow lg:flex">{/* SPACER */}</div>
+        <div className="hidden flex-shrink-0 lg:flex">
+          <nav
+            role="menu"
+            className="items-justified hidden justify-center space-x-4 lg:flex"
           >
             <ThemeSwitcher />
+            <ButtonLink
+              href="https://nx.app/?utm_source=nx.dev&utm_medium=header-menu"
+              title="Go to app"
+              variant="secondary"
+              size="small"
+            >
+              <NxCloudIcon className="w-4 h-4" aria-hidden="true" />
+              <span>Go to app</span>
+            </ButtonLink>
           </nav>
         </div>
       </div>

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

@@ -82,9 +82,9 @@ export function Header(): JSX.Element {
       href: '/launch-nx',
     },
     {
-      name: 'Nx Enterprise',
+      name: 'Contact us',
-      description: 'Need help?',
+      description: 'Give us a call!',
-      href: 'https://nx.app/enterprise?utm_source=nx.dev',
+      href: 'https://nx.app/enterprise?utm_source=nx.dev&utm_medium=header-menu',
     },
   ];
 
@@ -173,15 +173,6 @@ export function Header(): JSX.Element {
                 </>
               )}
             </Popover>
-            <Link
-              href="https://nx.app/enterprise?utm_source=nx.dev"
-              title="Check Nx Enterprise"
-              target="_blank"
-              rel="noreferrer"
-              className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 dark:text-slate-200 dark:hover:text-sky-500 md:inline-flex"
-            >
-              Enterprise
-            </Link>
             <Link
               href="/blog"
               title="Blog"
@@ -196,13 +187,6 @@ export function Header(): JSX.Element {
             >
               Community
             </Link>
-            <Link
-              href="/plugin-registry"
-              title="Check Nx available plugins"
-              className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 dark:text-slate-200 dark:hover:text-sky-500 md:inline-flex"
-            >
-              Plugins registry
-            </Link>
             <Link
               href="/launch-nx"
               title="Launch Nx"
@@ -213,6 +197,14 @@ export function Header(): JSX.Element {
               {/*  <span className="relative inline-flex h-3 w-3 rounded-full bg-blue-500 dark:bg-sky-500" />*/}
               {/*</span>*/}Launch Nx
             </Link>
+            <a
+              href="https://nx.app/enterprise?utm_source=nx.dev&utm_medium=header-menu"
+              target="_blank"
+              title="Contact us"
+              className="hidden px-3 py-2 font-medium leading-tight hover:text-blue-500 dark:text-slate-200 dark:hover:text-sky-500 md:inline-flex"
+            >
+              Contact us
+            </a>
           </nav>
         </div>
         <div className="flex-shrink-0 text-sm">

nx-dev/ui-common/src/lib/nx-cloud-icon.tsx

@@ -0,0 +1,17 @@
+import { FC, SVGProps } from 'react';
+
+export const NxCloudIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+    fill="transparent"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      d="M22.167 7.167v-2.5a2.5 2.5 0 0 0-2.5-2.5h-15a2.5 2.5 0 0 0-2.5 2.5v15a2.5 2.5 0 0 0 2.5 2.5h2.5m15-15c-2.76 0-5 2.24-5 5s-2.24 5-5 5-5 2.24-5 5m15-15V19.59a2.577 2.577 0 0 1-2.576 2.576H7.167"
+      strokeWidth="2"
+    />
+  </svg>
+);

nx-dev/ui-common/src/lib/sidebar.tsx

@@ -185,35 +185,53 @@ export function SidebarMobile({
   const isNx: boolean =
     !isCI && !isAPI && !isPlugins && !isChangelog && !isAiChat;
 
-  const sections = [
+  const sections = {
-    { name: 'Home', href: '/', current: false },
+    general: [
-    { name: 'Nx', href: '/getting-started/intro', current: isNx },
+      { name: 'Home', href: '/', current: false },
-    {
+      { name: 'Blog', href: '/blog', current: false },
-      name: 'CI',
+      { name: 'Community', href: '/community', current: false },
-      href: '/ci/intro/ci-with-nx',
+      { name: 'Launch Nx', href: '/launch-nx', current: false },
-      current: isCI,
+      {
-    },
+        name: 'Contact',
-    {
+        href: 'https://nx.app/enterprise?utm_source=nx.dev&utm_medium=header-menu',
-      name: 'Extending Nx',
+        current: false,
-      href: '/extending-nx/intro/getting-started',
+      },
-      current: isPlugins,
+      {
-    },
+        name: 'Go to app',
-    {
+        href: 'https://nx.app/?utm_source=nx.dev&utm_medium=header-menu',
-      name: 'API',
+        current: false,
-      href: '/nx-api',
+      },
-      current: isAPI,
+    ],
-    },
+    documentation: [
-    {
+      { name: 'Nx', href: '/getting-started/intro', current: isNx },
-      name: 'Changelog',
+      {
-      href: '/changelog',
+        name: 'CI',
-      current: isChangelog,
+        href: '/ci/intro/ci-with-nx',
-    },
+        current: isCI,
-    {
+      },
-      name: 'AI Chat',
+      {
-      href: '/ai-chat',
+        name: 'Extending Nx',
-      current: isAiChat,
+        href: '/extending-nx/intro/getting-started',
-    },
+        current: isPlugins,
-  ];
+      },
+      {
+        name: 'API',
+        href: '/nx-api',
+        current: isAPI,
+      },
+      {
+        name: 'Changelog',
+        href: '/changelog',
+        current: isChangelog,
+      },
+      {
+        name: 'AI Chat',
+        href: '/ai-chat',
+        current: isAiChat,
+      },
+    ],
+  };
+
   return (
     <Transition.Root show={navIsOpen} as={Fragment}>
       <Dialog as="div" className="relative z-40" onClose={() => void 0}>
@@ -229,25 +247,44 @@ export function SidebarMobile({
           >
             <Dialog.Panel className="relative flex w-full flex-col overflow-y-auto bg-white p-4 dark:bg-slate-900">
               {/*SECTIONS*/}
-              <div className="mb-8 grid w-full shrink-0 grid-cols-3 items-center justify-between">
+              <div className="divide-y divide-slate-200">
-                {sections.map((section) => (
+                <div className="grid w-full shrink-0 grid-cols-3 items-center justify-between">
-                  <Link
+                  {sections.general.map((section) => (
-                    key={section.name}
+                    <Link
-                    href={section.href}
+                      key={section.name}
-                    className={cx(
+                      href={section.href}
-                      section.current
+                      className={cx(
-                        ? 'text-blue-600 dark:text-sky-500'
+                        section.current
-                        : 'hover:text-slate-900 dark:hover:text-sky-400',
+                          ? 'text-blue-600 dark:text-sky-500'
-                      'whitespace-nowrap p-4 text-center text-sm font-medium'
+                          : 'hover:text-slate-900 dark:hover:text-sky-400',
-                    )}
+                        'whitespace-nowrap p-4 text-center text-sm font-medium'
-                    aria-current={section.current ? 'page' : undefined}
+                      )}
-                  >
+                      aria-current={section.current ? 'page' : undefined}
-                    {section.name}
+                    >
-                  </Link>
+                      {section.name}
-                ))}
+                    </Link>
+                  ))}
+                </div>
+                <div className="grid w-full shrink-0 grid-cols-3 items-center justify-between">
+                  {sections.documentation.map((section) => (
+                    <Link
+                      key={section.name}
+                      href={section.href}
+                      className={cx(
+                        section.current
+                          ? 'text-blue-600 dark:text-sky-500'
+                          : 'hover:text-slate-900 dark:hover:text-sky-400',
+                        'whitespace-nowrap p-4 text-center text-sm font-medium'
+                      )}
+                      aria-current={section.current ? 'page' : undefined}
+                    >
+                      {section.name}
+                    </Link>
+                  ))}
+                </div>
               </div>
               {/*SIDEBAR*/}
-              <div data-testid="mobile-navigation-wrapper ">
+              <div data-testid="mobile-navigation-wrapper" className="mt-8">
                 <nav
                   id="mobile-nav"
                   data-testid="mobile-navigation"

nx-dev/ui-home/src/lib/extensible-and-integrated.tsx

@@ -100,11 +100,9 @@ export function ExtensibleAndIntegrated(): JSX.Element {
             </div>
           </Tab.List>
           <Tab.Panels>
-            <AnimatePresence>
+            {tabs.map((tab) => (
-              {tabs.map((tab) => (
+              <Tab.Panel key={'panel-' + tab.title}>{tab.panel}</Tab.Panel>
-                <Tab.Panel key={'panel-' + tab.title}>{tab.panel}</Tab.Panel>
+            ))}
-              ))}
-            </AnimatePresence>
           </Tab.Panels>
         </Tab.Group>
       </div>

nx-dev/ui-home/src/lib/hero.tsx

@@ -4,10 +4,7 @@ import {
   ClipboardDocumentIcon,
 } from '@heroicons/react/24/outline';
 import { ButtonLink } from '@nx/nx-dev/ui-common';
-import Link from 'next/link';
+import { Fragment, useEffect, useState } from 'react';
-import React, { Fragment, useEffect, useState } from 'react';
-// @ts-ignore
-import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { Transition } from '@headlessui/react';
 import { cx } from '@nx/nx-dev/ui-primitives';
 
@@ -153,30 +150,14 @@ export function Hero(): JSX.Element {
               Get started
             </ButtonLink>
 
-            <CopyToClipboard
+            <ButtonLink
-              text="npx create-nx-workspace@latest"
+              href="https://nx.app/enterprise?utm_source=nx.dev&utm_medium=hero"
-              onCopy={() => {
+              variant="secondary"
-                setCopied(true);
+              size="large"
-              }}
+              title="Contact us"
             >
-              <button
+              Contact us
-                title="Create an Nx workspace"
+            </ButtonLink>
-                className="group relative flex w-full items-center rounded-lg border border-slate-200 bg-white py-2 px-2 sm:px-6 text-sm sm:text-lg font-semibold leading-6 transition hover:bg-slate-100 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:border-slate-700 dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700 sm:w-auto"
-              >
-                <span className="absolute top-1 right-1 flex opacity-0 transition-opacity group-hover:opacity-100">
-                  {copied ? (
-                    <ClipboardDocumentCheckIcon className="h-4 w-4" />
-                  ) : (
-                    <ClipboardDocumentIcon className="h-4 w-4" />
-                  )}
-                </span>
-                <ChevronRightIcon
-                  aria-hidden="true"
-                  className="font-input-mono sm:mr-2 h-5 w-5 text-blue-500 dark:text-sky-500"
-                />
-                npx create-nx-workspace
-              </button>
-            </CopyToClipboard>
           </div>
           <div className="mt-4 flex gap-2 text-md items-center justify-center italic">
             Built with

nx-dev/ui-home/src/lib/nx-with-ci.tsx

@@ -3,7 +3,7 @@ import {
   CogIcon,
   ServerStackIcon,
 } from '@heroicons/react/24/outline';
-import { ButtonLink, SectionHeading } from '@nx/nx-dev/ui-common';
+import { SectionHeading } from '@nx/nx-dev/ui-common';
 import {
   animate,
   motion,
@@ -133,6 +133,7 @@ export function NxWithCi(): JSX.Element {
                 target="_blank"
                 className="hover:underline text-sm font-medium"
                 title="Find out how to reduce CI time with Nx"
+                rel="noreferrer"
               >
                 Find out how
               </a>