From 88d346cebded72c810dabfb4b9d381a489f7be3b Mon Sep 17 00:00:00 2001 From: Benjamin Cabanes <3447705+bcabanes@users.noreply.github.com> Date: Thu, 15 Feb 2024 16:40:50 -0500 Subject: [PATCH 1/2] feat(nx-dev): update website header components It makes significant changes to several UI components for improved navigation and visual similarity. This involves updates to wording, removal of unnecessary elements, and modifications for better responsiveness. It also introduces the new `NxCloudIcon` and reorganizes the layout navigation in the `sidebar.tsx` file. The main header has now a "Contact" link and the documentation header has a "Go to app" and the main navigation menu embedded. --- .../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 | 24 ++-- 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/nx-with-ci.tsx | 3 +- 8 files changed, 178 insertions(+), 87 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/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 From 2feb64b0d200adecbabb9946f5aec14cb195c058 Mon Sep 17 00:00:00 2001 From: Benjamin Cabanes <3447705+bcabanes@users.noreply.github.com> Date: Thu, 15 Feb 2024 17:17:24 -0500 Subject: [PATCH 2/2] feat(nx-dev): add contact us button on hero home page --- .../src/lib/documentation-header.tsx | 4 +-- nx-dev/ui-common/src/lib/header.tsx | 10 +++--- nx-dev/ui-home/src/lib/hero.tsx | 35 +++++-------------- 3 files changed, 15 insertions(+), 34 deletions(-) diff --git a/nx-dev/ui-common/src/lib/documentation-header.tsx b/nx-dev/ui-common/src/lib/documentation-header.tsx index 50957f8e05345..f09d73530d8f2 100644 --- a/nx-dev/ui-common/src/lib/documentation-header.tsx +++ b/nx-dev/ui-common/src/lib/documentation-header.tsx @@ -254,10 +254,10 @@ export function DocumentationHeader({ - Contact + Contact us
diff --git a/nx-dev/ui-common/src/lib/header.tsx b/nx-dev/ui-common/src/lib/header.tsx index 8c4896fbd2fb0..f2e1832b8a1cd 100644 --- a/nx-dev/ui-common/src/lib/header.tsx +++ b/nx-dev/ui-common/src/lib/header.tsx @@ -82,9 +82,9 @@ export function Header(): JSX.Element { href: '/launch-nx', }, { - name: 'Nx Enterprise', - description: 'Need help?', - href: 'https://nx.app/enterprise?utm_source=nx.dev', + name: 'Contact us', + description: 'Give us a call!', + href: 'https://nx.app/enterprise?utm_source=nx.dev&utm_medium=header-menu', }, ]; @@ -200,10 +200,10 @@ export function Header(): JSX.Element { - Contact + Contact us
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