From 27cf3082dac4a61b02e0829b40fc1f1bca085f7b Mon Sep 17 00:00:00 2001 From: Benjamin Cabanes <3447705+bcabanes@users.noreply.github.com> Date: Thu, 15 Feb 2024 17:34:34 -0500 Subject: [PATCH] feat(nx-dev): update website header components (#21833) --- .../feature-search/src/lib/algolia-search.tsx | 9 +- nx-dev/ui-common/src/index.ts | 1 + .../src/lib/documentation-header.tsx | 74 ++++++++-- nx-dev/ui-common/src/lib/header.tsx | 30 ++-- nx-dev/ui-common/src/lib/nx-cloud-icon.tsx | 17 +++ nx-dev/ui-common/src/lib/sidebar.tsx | 129 +++++++++++------- .../src/lib/extensible-and-integrated.tsx | 8 +- nx-dev/ui-home/src/lib/hero.tsx | 35 ++--- nx-dev/ui-home/src/lib/nx-with-ci.tsx | 3 +- 9 files changed, 189 insertions(+), 117 deletions(-) create mode 100644 nx-dev/ui-common/src/lib/nx-cloud-icon.tsx diff --git a/nx-dev/feature-search/src/lib/algolia-search.tsx b/nx-dev/feature-search/src/lib/algolia-search.tsx index 1010abe7098c0..2caaf2dc19472 100644 --- a/nx-dev/feature-search/src/lib/algolia-search.tsx +++ b/nx-dev/feature-search/src/lib/algolia-search.tsx @@ -75,7 +75,7 @@ export function AlgoliaSearch({ {!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" > - - Search{' '} - Documentation ... + + Search the docs ... -
diff --git a/nx-dev/ui-common/src/lib/nx-cloud-icon.tsx b/nx-dev/ui-common/src/lib/nx-cloud-icon.tsx new file mode 100644 index 0000000000000..805e0fb0cff41 --- /dev/null +++ b/nx-dev/ui-common/src/lib/nx-cloud-icon.tsx @@ -0,0 +1,17 @@ +import { FC, SVGProps } from 'react'; + +export const NxCloudIcon: FC> = (props) => ( + + + +); diff --git a/nx-dev/ui-common/src/lib/sidebar.tsx b/nx-dev/ui-common/src/lib/sidebar.tsx index 6cb872e035842..181da47f3f42f 100644 --- a/nx-dev/ui-common/src/lib/sidebar.tsx +++ b/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 = [ - { name: 'Home', href: '/', current: false }, - { name: 'Nx', href: '/getting-started/intro', current: isNx }, - { - name: 'CI', - href: '/ci/intro/ci-with-nx', - current: isCI, - }, - { - name: 'Extending Nx', - 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, - }, - ]; + const sections = { + general: [ + { name: 'Home', href: '/', current: false }, + { name: 'Blog', href: '/blog', current: false }, + { name: 'Community', href: '/community', current: false }, + { name: 'Launch Nx', href: '/launch-nx', current: false }, + { + name: 'Contact', + href: 'https://nx.app/enterprise?utm_source=nx.dev&utm_medium=header-menu', + current: false, + }, + { + name: 'Go to app', + href: 'https://nx.app/?utm_source=nx.dev&utm_medium=header-menu', + current: false, + }, + ], + documentation: [ + { name: 'Nx', href: '/getting-started/intro', current: isNx }, + { + name: 'CI', + href: '/ci/intro/ci-with-nx', + current: isCI, + }, + { + name: 'Extending Nx', + 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 ( void 0}> @@ -229,25 +247,44 @@ export function SidebarMobile({ > {/*SECTIONS*/} -
- {sections.map((section) => ( - - {section.name} - - ))} +
+
+ {sections.general.map((section) => ( + + {section.name} + + ))} +
+
+ {sections.documentation.map((section) => ( + + {section.name} + + ))} +
{/*SIDEBAR*/} -
+
diff --git a/nx-dev/ui-home/src/lib/hero.tsx b/nx-dev/ui-home/src/lib/hero.tsx index 38302b45c7e19..42092e5c37cf7 100644 --- a/nx-dev/ui-home/src/lib/hero.tsx +++ b/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 React, { Fragment, useEffect, useState } from 'react'; -// @ts-ignore -import { CopyToClipboard } from 'react-copy-to-clipboard'; +import { Fragment, useEffect, useState } from 'react'; import { Transition } from '@headlessui/react'; import { cx } from '@nx/nx-dev/ui-primitives'; @@ -153,30 +150,14 @@ export function Hero(): JSX.Element { Get started - { - setCopied(true); - }} + - - + Contact us +
Built with diff --git a/nx-dev/ui-home/src/lib/nx-with-ci.tsx b/nx-dev/ui-home/src/lib/nx-with-ci.tsx index 56f6e90b3cd4c..bf7e75a734eec 100644 --- a/nx-dev/ui-home/src/lib/nx-with-ci.tsx +++ b/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