feat(nx-dev): Migrate brands from nx.app (#27044)
This commit is contained in:
Nicholas Cunningham
GitHub
parent
8f5d3dccc9
commit
09c0b3d31a
52
nx-dev/nx-dev/app/brands/page.tsx
Normal file
52
nx-dev/nx-dev/app/brands/page.tsx
Normal file
@ -0,0 +1,52 @@
|
||||
import { DefaultLayout } from '@nx/nx-dev/ui-common';
|
||||
import {
|
||||
Hero,
|
||||
LernaBrand,
|
||||
NxBrand,
|
||||
NxCloudBrand,
|
||||
NxConsoleBrand,
|
||||
} from '@nx/nx-dev/ui-brands';
|
||||
import type { Metadata } from 'next';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Brands & Guidelines',
|
||||
description:
|
||||
'We’ve created the following guidelines for 3rd party use of our logos, content, and trademarks.',
|
||||
openGraph: {
|
||||
url: 'https://nx.dev/brands',
|
||||
title: 'Brands & Guidelines',
|
||||
description:
|
||||
'We’ve created the following guidelines for 3rd party use of our logos, content, and trademarks.',
|
||||
images: [
|
||||
{
|
||||
url: 'https://nx.dev/socials/nx-media.png',
|
||||
width: 800,
|
||||
height: 421,
|
||||
alt: 'Nx: Smart Monorepos · Fast CI',
|
||||
type: 'image/jpeg',
|
||||
},
|
||||
],
|
||||
siteName: 'NxDev',
|
||||
type: 'website',
|
||||
},
|
||||
};
|
||||
|
||||
export default function BrandsPage() {
|
||||
return (
|
||||
<DefaultLayout>
|
||||
<Hero />
|
||||
<div className="mt-32 lg:mt-56">
|
||||
<NxBrand />
|
||||
</div>
|
||||
<div className="mt-32 lg:mt-56">
|
||||
<NxCloudBrand />
|
||||
</div>
|
||||
<div className="mt-32 lg:mt-56">
|
||||
<NxConsoleBrand />
|
||||
</div>
|
||||
<div className="mt-32 lg:mt-56">
|
||||
<LernaBrand />
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
);
|
||||
}
|
||||
BIN
nx-dev/nx-dev/public/assets/brand-kits/lerna-logos-assets.zip
Normal file
BIN
nx-dev/nx-dev/public/assets/brand-kits/lerna-logos-assets.zip
Normal file
Binary file not shown.
BIN
nx-dev/nx-dev/public/assets/brand-kits/nx-cloud-logos-assets.zip
Normal file
BIN
nx-dev/nx-dev/public/assets/brand-kits/nx-cloud-logos-assets.zip
Normal file
Binary file not shown.
Binary file not shown.
BIN
nx-dev/nx-dev/public/assets/brand-kits/nx-logos-assets.zip
Normal file
BIN
nx-dev/nx-dev/public/assets/brand-kits/nx-logos-assets.zip
Normal file
Binary file not shown.
12
nx-dev/ui-brands/.babelrc
Normal file
12
nx-dev/ui-brands/.babelrc
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"presets": [
|
||||
[
|
||||
"@nx/react/babel",
|
||||
{
|
||||
"runtime": "automatic",
|
||||
"useBuiltIns": "usage"
|
||||
}
|
||||
]
|
||||
],
|
||||
"plugins": []
|
||||
}
|
||||
18
nx-dev/ui-brands/.eslintrc.json
Normal file
18
nx-dev/ui-brands/.eslintrc.json
Normal file
@ -0,0 +1,18 @@
|
||||
{
|
||||
"extends": ["plugin:@nx/react", "../../.eslintrc.json"],
|
||||
"ignorePatterns": ["!**/*"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
|
||||
"rules": {}
|
||||
},
|
||||
{
|
||||
"files": ["*.ts", "*.tsx"],
|
||||
"rules": {}
|
||||
},
|
||||
{
|
||||
"files": ["*.js", "*.jsx"],
|
||||
"rules": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
7
nx-dev/ui-brands/README.md
Normal file
7
nx-dev/ui-brands/README.md
Normal file
@ -0,0 +1,7 @@
|
||||
# ui-brands
|
||||
|
||||
This library was generated with [Nx](https://nx.dev).
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `nx test ui-brands` to execute the unit tests via [Jest](https://jestjs.io).
|
||||
9
nx-dev/ui-brands/project.json
Normal file
9
nx-dev/ui-brands/project.json
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"name": "ui-brands",
|
||||
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
||||
"sourceRoot": "nx-dev/ui-brands/src",
|
||||
"projectType": "library",
|
||||
"tags": [],
|
||||
"// targets": "to see all targets run: nx show project ui-brands --web",
|
||||
"targets": {}
|
||||
}
|
||||
5
nx-dev/ui-brands/src/index.ts
Normal file
5
nx-dev/ui-brands/src/index.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export * from './lib/hero';
|
||||
export * from './lib/nx-brand';
|
||||
export * from './lib/nx-cloud';
|
||||
export * from './lib/lerna-brand';
|
||||
export * from './lib/nx-console-brand';
|
||||
18
nx-dev/ui-brands/src/lib/hero.tsx
Normal file
18
nx-dev/ui-brands/src/lib/hero.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import { SectionHeading } from '@nx/nx-dev/ui-common';
|
||||
|
||||
export function Hero() {
|
||||
return (
|
||||
<div
|
||||
id="hero"
|
||||
className="mx-auto max-w-3xl px-4 text-center sm:px-6 lg:px-8"
|
||||
>
|
||||
<SectionHeading as="h2" variant="display">
|
||||
Brands & Guidelines
|
||||
</SectionHeading>
|
||||
<SectionHeading as="p" variant="subtitle" className="mt-6">
|
||||
We’ve created the following guidelines for 3rd party use of our logos,
|
||||
content, and trademarks.
|
||||
</SectionHeading>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
65
nx-dev/ui-brands/src/lib/lerna-brand.tsx
Normal file
65
nx-dev/ui-brands/src/lib/lerna-brand.tsx
Normal file
@ -0,0 +1,65 @@
|
||||
import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
|
||||
import {
|
||||
ButtonLink,
|
||||
SectionDescription,
|
||||
SectionHeading,
|
||||
} from '@nx/nx-dev/ui-common';
|
||||
import { LernaIcon } from '@nx/nx-dev/ui-icons';
|
||||
|
||||
export function LernaBrand() {
|
||||
return (
|
||||
<article id="lerna" className="relative">
|
||||
<div className="mx-auto max-w-7xl gap-16 px-4 sm:grid sm:grid-cols-2 sm:px-6 lg:px-8">
|
||||
<div>
|
||||
<header>
|
||||
<SectionHeading as="h2" variant="title">
|
||||
Lerna
|
||||
</SectionHeading>
|
||||
<SectionHeading as="p" variant="subtitle" className="mt-4">
|
||||
The Original Tool forJavaScript Monorepos
|
||||
</SectionHeading>
|
||||
<SectionDescription as="p" className="mt-2">
|
||||
The Lerna trademark includes the Lerna name & logo, and any word,
|
||||
phrase, image, or other designation that identifies any Nrwl
|
||||
products. Please don’t modify the marks or use them in a confusing
|
||||
way, including suggesting sponsorship or endorsement by Nrwl, or
|
||||
in a way that confuses Nrwl with another brand.
|
||||
</SectionDescription>
|
||||
</header>
|
||||
<h4 className="mt-4 text-lg leading-8 text-slate-700 sm:text-xl dark:text-slate-300">
|
||||
Spelling
|
||||
</h4>
|
||||
<p className="mt-2 text-base text-slate-700 dark:text-slate-400">
|
||||
The preferred written format is Lerna. <br /> For social media
|
||||
usage,
|
||||
<span className="mx-1 inline-flex items-center rounded-full bg-slate-100 px-3 py-0.5 text-sm font-medium text-slate-800 dark:bg-slate-700 dark:text-slate-300">
|
||||
#Lerna
|
||||
</span>{' '}
|
||||
is an accepted format.
|
||||
</p>
|
||||
<ButtonLink
|
||||
variant="secondary"
|
||||
href="/assets/brand-kits/lerna-logos-assets.zip"
|
||||
size="default"
|
||||
target="_blank"
|
||||
title="Download"
|
||||
className="my-12"
|
||||
>
|
||||
<DocumentArrowDownIcon className="h-5 w-5" />
|
||||
<span>
|
||||
Download Lerna assets{' '}
|
||||
<span className="text-sm italic">(zip)</span>
|
||||
</span>
|
||||
</ButtonLink>
|
||||
</div>
|
||||
<div aria-hidden="true">
|
||||
<div className="w-full rounded-md border border-slate-100 bg-slate-50/20 p-4 dark:border-slate-800 dark:bg-slate-800/60">
|
||||
<div className="grid grid-cols-1 items-center justify-items-center rounded-sm bg-white p-2 ring-1 ring-slate-50 dark:bg-slate-800/80 dark:ring-slate-800">
|
||||
<LernaIcon className="m-16 h-36 w-36 text-slate-900 dark:text-slate-100" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
63
nx-dev/ui-brands/src/lib/nx-brand.tsx
Normal file
63
nx-dev/ui-brands/src/lib/nx-brand.tsx
Normal file
@ -0,0 +1,63 @@
|
||||
import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
|
||||
import {
|
||||
ButtonLink,
|
||||
SectionDescription,
|
||||
SectionHeading,
|
||||
} from '@nx/nx-dev/ui-common';
|
||||
import { NxIcon } from '@nx/nx-dev/ui-icons';
|
||||
|
||||
export function NxBrand() {
|
||||
return (
|
||||
<article id="nx" className="relative">
|
||||
<div className="mx-auto max-w-7xl gap-16 px-4 sm:grid sm:grid-cols-2 sm:px-6 lg:px-8">
|
||||
<div>
|
||||
<header>
|
||||
<SectionHeading as="h2" variant="title">
|
||||
Nx
|
||||
</SectionHeading>
|
||||
<SectionHeading as="p" variant="subtitle" className="mt-4">
|
||||
Smart monorepos · Fast CI
|
||||
</SectionHeading>
|
||||
<SectionDescription as="p" className="mt-2">
|
||||
The Nx trademark includes the Nx name & logo, and any word,
|
||||
phrase, image, or other designation that identifies any NX
|
||||
products. Please don’t modify the marks or use them in a confusing
|
||||
way, including suggesting sponsorship or endorsement by Nx, or in
|
||||
a way that confuses Nx with another brand.
|
||||
</SectionDescription>
|
||||
</header>
|
||||
<h4 className="mt-4 text-lg leading-8 text-slate-700 sm:text-xl dark:text-slate-300">
|
||||
Spelling
|
||||
</h4>
|
||||
<p className="mt-2 text-base text-slate-700 dark:text-slate-400">
|
||||
The preferred written format is Nx. <br /> For social media usage,
|
||||
<span className="mx-1 inline-flex items-center rounded-full bg-slate-100 px-3 py-0.5 text-sm font-medium text-slate-800 dark:bg-slate-700 dark:text-slate-300">
|
||||
#NxDevTools
|
||||
</span>{' '}
|
||||
is an accepted format.
|
||||
</p>
|
||||
<ButtonLink
|
||||
variant="secondary"
|
||||
size="default"
|
||||
target="_blank"
|
||||
title="Download"
|
||||
href="/assets/brand-kits/nx-logos-assets.zip"
|
||||
className="my-12"
|
||||
>
|
||||
<DocumentArrowDownIcon className="h-5 w-5" />
|
||||
<span>
|
||||
Download Nx assets <span className="text-sm italic">(zip)</span>
|
||||
</span>
|
||||
</ButtonLink>
|
||||
</div>
|
||||
<div aria-hidden="true">
|
||||
<div className="w-full rounded-md border border-slate-100 bg-slate-50/20 p-4 dark:border-slate-800 dark:bg-slate-800/60">
|
||||
<div className="grid grid-cols-1 items-center justify-items-center rounded-sm bg-white p-2 ring-1 ring-slate-50 dark:bg-slate-800/80 dark:ring-slate-800">
|
||||
<NxIcon className="m-20 h-28 w-28 text-slate-900 dark:text-slate-100" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
65
nx-dev/ui-brands/src/lib/nx-cloud.tsx
Normal file
65
nx-dev/ui-brands/src/lib/nx-cloud.tsx
Normal file
@ -0,0 +1,65 @@
|
||||
import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
|
||||
import {
|
||||
ButtonLink,
|
||||
SectionDescription,
|
||||
SectionHeading,
|
||||
} from '@nx/nx-dev/ui-common';
|
||||
import { NxCloudIcon } from '@nx/nx-dev/ui-icons';
|
||||
|
||||
export function NxCloudBrand() {
|
||||
return (
|
||||
<article id="nx-cloud" className="relative">
|
||||
<div className="mx-auto max-w-7xl gap-16 px-4 sm:grid sm:grid-cols-2 sm:px-6 lg:px-8">
|
||||
<div>
|
||||
<header>
|
||||
<SectionHeading as="h2" variant="title">
|
||||
Nx Cloud
|
||||
</SectionHeading>
|
||||
<SectionHeading as="p" variant="subtitle" className="mt-4">
|
||||
Fast CI · Built for Monorepos
|
||||
</SectionHeading>
|
||||
<SectionDescription as="p" className="mt-2">
|
||||
The Nx Cloud trademark includes the Nx Cloud name & logo, and any
|
||||
word, phrase, image, or other designation that identifies any Nx
|
||||
products. Please don’t modify the marks or use them in a confusing
|
||||
way, including suggesting sponsorship or endorsement by Nx, or in
|
||||
a way that confuses Nx with another brand.
|
||||
</SectionDescription>
|
||||
</header>
|
||||
<h4 className="mt-4 text-lg leading-8 text-slate-700 sm:text-xl dark:text-slate-300">
|
||||
Spelling
|
||||
</h4>
|
||||
<p className="mt-2 text-base text-slate-700 dark:text-slate-400">
|
||||
The preferred written format is Nx Cloud. <br /> For social media
|
||||
usage,
|
||||
<span className="mx-1 inline-flex items-center rounded-full bg-slate-100 px-3 py-0.5 text-sm font-medium text-slate-800 dark:bg-slate-700 dark:text-slate-300">
|
||||
#NxCloud
|
||||
</span>{' '}
|
||||
is an accepted format.
|
||||
</p>
|
||||
<ButtonLink
|
||||
variant="secondary"
|
||||
size="default"
|
||||
href="/assets/brand-kits/nx-cloud-logos-assets.zip"
|
||||
target="_blank"
|
||||
title="Download"
|
||||
className="my-12"
|
||||
>
|
||||
<DocumentArrowDownIcon className="h-5 w-5" />
|
||||
<span>
|
||||
Download Nx Cloud assets{' '}
|
||||
<span className="text-sm italic">(zip)</span>
|
||||
</span>
|
||||
</ButtonLink>
|
||||
</div>
|
||||
<div aria-hidden="true">
|
||||
<div className="w-full rounded-md border border-slate-100 bg-slate-50/20 p-4 dark:border-slate-800 dark:bg-slate-800/60">
|
||||
<div className="grid grid-cols-1 items-center justify-items-center rounded-sm bg-white p-2 ring-1 ring-slate-50 dark:bg-slate-800/80 dark:ring-slate-800">
|
||||
<NxCloudIcon className="m-20 h-28 w-28 text-slate-900 dark:text-slate-100" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
65
nx-dev/ui-brands/src/lib/nx-console-brand.tsx
Normal file
65
nx-dev/ui-brands/src/lib/nx-console-brand.tsx
Normal file
@ -0,0 +1,65 @@
|
||||
import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
|
||||
import {
|
||||
ButtonLink,
|
||||
SectionDescription,
|
||||
SectionHeading,
|
||||
} from '@nx/nx-dev/ui-common';
|
||||
import { NxConsoleIcon } from '@nx/nx-dev/ui-icons';
|
||||
|
||||
export function NxConsoleBrand() {
|
||||
return (
|
||||
<article id="nx-console" className="relative">
|
||||
<div className="mx-auto max-w-7xl gap-16 px-4 sm:grid sm:grid-cols-2 sm:px-6 lg:px-8">
|
||||
<div>
|
||||
<header>
|
||||
<SectionHeading as="h2" variant="title">
|
||||
Nx Console
|
||||
</SectionHeading>
|
||||
<SectionHeading as="p" variant="subtitle" className="mt-4">
|
||||
The UI for Nx (VSCode ext.)
|
||||
</SectionHeading>
|
||||
<SectionDescription as="p" className="mt-2">
|
||||
The Nx Console trademark includes the Nx Console name & logo, and
|
||||
any word, phrase, image, or other designation that identifies any
|
||||
Nx products. Please don’t modify the marks or use them in a
|
||||
confusing way, including suggesting sponsorship or endorsement by
|
||||
Nx, or in a way that confuses Nx with another brand.
|
||||
</SectionDescription>
|
||||
</header>
|
||||
<h4 className="mt-4 text-lg leading-8 text-slate-700 sm:text-xl dark:text-slate-300">
|
||||
Spelling
|
||||
</h4>
|
||||
<p className="mt-2 text-base text-slate-700 dark:text-slate-400">
|
||||
The preferred written format is Nx Console. <br /> For social media
|
||||
usage,
|
||||
<span className="mx-1 inline-flex items-center rounded-full bg-slate-100 px-3 py-0.5 text-sm font-medium text-slate-800 dark:bg-slate-700 dark:text-slate-300">
|
||||
#NxConsole
|
||||
</span>{' '}
|
||||
is an accepted format.
|
||||
</p>
|
||||
<ButtonLink
|
||||
variant="secondary"
|
||||
size="default"
|
||||
href="/assets/brand-kits/nx-console-logos-assets.zip"
|
||||
target="_blank"
|
||||
title="Download"
|
||||
className="my-12"
|
||||
>
|
||||
<DocumentArrowDownIcon className="h-5 w-5" />
|
||||
<span>
|
||||
Download Nx Console assets{' '}
|
||||
<span className="text-sm italic">(zip)</span>
|
||||
</span>
|
||||
</ButtonLink>
|
||||
</div>
|
||||
<div aria-hidden="true">
|
||||
<div className="w-full rounded-md border border-slate-100 bg-slate-50/20 p-4 dark:border-slate-800 dark:bg-slate-800/60">
|
||||
<div className="grid grid-cols-1 items-center justify-items-center rounded-sm bg-white p-2 ring-1 ring-slate-50 dark:bg-slate-800/80 dark:ring-slate-800">
|
||||
<NxConsoleIcon className="m-16 h-40 w-40 text-slate-900 dark:text-slate-100" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
17
nx-dev/ui-brands/tsconfig.json
Normal file
17
nx-dev/ui-brands/tsconfig.json
Normal file
@ -0,0 +1,17 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"allowJs": false,
|
||||
"esModuleInterop": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true
|
||||
},
|
||||
"files": [],
|
||||
"include": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.lib.json"
|
||||
}
|
||||
],
|
||||
"extends": "../../tsconfig.base.json"
|
||||
}
|
||||
24
nx-dev/ui-brands/tsconfig.lib.json
Normal file
24
nx-dev/ui-brands/tsconfig.lib.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../dist/out-tsc",
|
||||
"types": [
|
||||
"node",
|
||||
|
||||
"@nx/react/typings/cssmodule.d.ts",
|
||||
"@nx/react/typings/image.d.ts"
|
||||
]
|
||||
},
|
||||
"exclude": [
|
||||
"jest.config.ts",
|
||||
"src/**/*.spec.ts",
|
||||
"src/**/*.test.ts",
|
||||
"src/**/*.spec.tsx",
|
||||
"src/**/*.test.tsx",
|
||||
"src/**/*.spec.js",
|
||||
"src/**/*.test.js",
|
||||
"src/**/*.spec.jsx",
|
||||
"src/**/*.test.jsx"
|
||||
],
|
||||
"include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
|
||||
}
|
||||
@ -21,6 +21,7 @@ export * from './lib/x-icon';
|
||||
export * from './lib/discord-icon';
|
||||
export * from './lib/trusted-by';
|
||||
export * from './lib/testimonials';
|
||||
export * from './lib/square-dotted-pattern';
|
||||
|
||||
export { resourceMenuItems } from './lib/headers/menu-items';
|
||||
export { solutionsMenuItems } from './lib/headers/menu-items';
|
||||
|
||||
@ -22,7 +22,7 @@ export function Footer(): JSX.Element {
|
||||
},
|
||||
{
|
||||
name: 'Brands & Guidelines',
|
||||
href: 'https://nx.app/brands?utm_source=nx.dev',
|
||||
href: '/brands',
|
||||
},
|
||||
{
|
||||
name: 'Site Map',
|
||||
@ -259,11 +259,7 @@ export function Footer(): JSX.Element {
|
||||
<p className="text-sm text-slate-400 xl:text-center">
|
||||
© 2024 made with{' '}
|
||||
<HeartIcon className="-mt-0.5 inline h-4 w-4" /> by{' '}
|
||||
<a
|
||||
href="https://nx.app/company/?utm_source=nx.dev"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<Link href="/company" prefetch={false}>
|
||||
<svg
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
@ -273,7 +269,7 @@ export function Footer(): JSX.Element {
|
||||
>
|
||||
<path d="m12 14.1-3.1 5-5.2-8.5v8.9H0v-15h3.7l5.2 8.9v-4l3 4.7zm.6-5.7V4.5H8.9v3.9h3.7zm5.6 4.1a2 2 0 0 0-2 1.3 2 2 0 0 1 2.4-.7c.4.2 1 .4 1.3.3a2.1 2.1 0 0 0-1.7-.9zm3.4 1c-.4 0-.8-.2-1.1-.6l-.2-.3a2.1 2.1 0 0 0-.5-.6 2 2 0 0 0-1.2-.3 2.5 2.5 0 0 0-2.3 1.5 2.3 2.3 0 0 1 4 .4.8.8 0 0 0 .9.3c.5 0 .4.4 1.2.5v-.1c0-.4-.3-.5-.8-.7zm2 1.3a.7.7 0 0 0 .4-.6c0-3-2.4-5.5-5.4-5.5a5.4 5.4 0 0 0-4.5 2.4l-1.5-2.4H8.9l3.5 5.4L9 19.5h3.6L14 17l1.6 2.4h3.5l-3.1-5a.7.7 0 0 1 0-.3 2.7 2.7 0 0 1 2.6-2.7c1.5 0 1.7.9 2 1.3.7.8 2 .5 2 1.5a.7.7 0 0 0 1 .6zm.4.2c-.2.3-.6.3-.8.6-.1.3.1.4.1.4s.4.2.6-.3V15z" />
|
||||
</svg>
|
||||
</a>
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -20,7 +20,7 @@ import {
|
||||
import { SectionsMenu } from './sections-menu';
|
||||
import { AnnouncementBanner } from '../announcement-banner';
|
||||
import { DiscordIcon } from '../discord-icon';
|
||||
import { NxCloudIcon, NxIcon } from '@nx/nx-dev/ui-icons';
|
||||
import { NxCloudAnimatedIcon, NxIcon } from '@nx/nx-dev/ui-icons';
|
||||
|
||||
function Menu({ tabs }: { tabs: any[] }): JSX.Element {
|
||||
return (
|
||||
@ -403,7 +403,7 @@ export function DocumentationHeader({
|
||||
variant="secondary"
|
||||
size="small"
|
||||
>
|
||||
<NxCloudIcon className="h-4 w-4" aria-hidden="true" />
|
||||
<NxCloudAnimatedIcon className="h-4 w-4" aria-hidden="true" />
|
||||
<span>Go to app</span>
|
||||
</ButtonLink>
|
||||
</nav>
|
||||
|
||||
@ -22,7 +22,7 @@ import { MobileMenuItem } from './mobile-menu-item';
|
||||
import { SectionsMenu } from './sections-menu';
|
||||
import { TwoColumnsMenu } from './two-columns-menu';
|
||||
import { AlgoliaSearch } from '@nx/nx-dev/feature-search';
|
||||
import { GitHubIcon, NxCloudIcon, NxIcon } from '@nx/nx-dev/ui-icons';
|
||||
import { GitHubIcon, NxCloudAnimatedIcon, NxIcon } from '@nx/nx-dev/ui-icons';
|
||||
|
||||
export function Header(): JSX.Element {
|
||||
let [isOpen, setIsOpen] = useState(false);
|
||||
@ -245,7 +245,7 @@ export function Header(): JSX.Element {
|
||||
target="_blank"
|
||||
title="Log in to your Nx Cloud Account"
|
||||
>
|
||||
<NxCloudIcon className="h-4 w-4" aria-hidden="true" />
|
||||
<NxCloudAnimatedIcon className="h-4 w-4" aria-hidden="true" />
|
||||
<span>Go to app</span>
|
||||
</ButtonLink>
|
||||
<a
|
||||
|
||||
103
nx-dev/ui-common/src/lib/square-dotted-pattern.tsx
Normal file
103
nx-dev/ui-common/src/lib/square-dotted-pattern.tsx
Normal file
@ -0,0 +1,103 @@
|
||||
import { FC, SVGProps } from 'react';
|
||||
|
||||
export const SquareDottedPattern: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
<>
|
||||
<svg
|
||||
className="absolute left-full top-12 translate-x-32 transform"
|
||||
width={404}
|
||||
height={384}
|
||||
fill="none"
|
||||
viewBox="0 0 404 384"
|
||||
{...props}
|
||||
>
|
||||
<defs>
|
||||
<pattern
|
||||
id="74b3fd99-0a6f-4271-bef2-e80eeafdf357"
|
||||
x={0}
|
||||
y={0}
|
||||
width={20}
|
||||
height={20}
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<rect
|
||||
x={0}
|
||||
y={0}
|
||||
width={4}
|
||||
height={4}
|
||||
className="text-slate-200 dark:text-slate-800"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect
|
||||
width={404}
|
||||
height={384}
|
||||
fill="url(#74b3fd99-0a6f-4271-bef2-e80eeafdf357)"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="absolute right-full top-1/2 -translate-x-32 -translate-y-1/2 transform"
|
||||
width={404}
|
||||
height={384}
|
||||
fill="none"
|
||||
viewBox="0 0 404 384"
|
||||
>
|
||||
<defs>
|
||||
<pattern
|
||||
id="f210dbf6-a58d-4871-961e-36d5016a0f49"
|
||||
x={0}
|
||||
y={0}
|
||||
width={20}
|
||||
height={20}
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<rect
|
||||
x={0}
|
||||
y={0}
|
||||
width={4}
|
||||
height={4}
|
||||
className="text-slate-200 dark:text-slate-800"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect
|
||||
width={404}
|
||||
height={384}
|
||||
fill="url(#f210dbf6-a58d-4871-961e-36d5016a0f49)"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="absolute bottom-12 left-full translate-x-32 transform"
|
||||
width={404}
|
||||
height={384}
|
||||
fill="none"
|
||||
viewBox="0 0 404 384"
|
||||
>
|
||||
<defs>
|
||||
<pattern
|
||||
id="d3eb07ae-5182-43e6-857d-35c643af9034"
|
||||
x={0}
|
||||
y={0}
|
||||
width={20}
|
||||
height={20}
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<rect
|
||||
x={0}
|
||||
y={0}
|
||||
width={4}
|
||||
height={4}
|
||||
className="text-slate-200 dark:text-slate-800"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect
|
||||
width={404}
|
||||
height={384}
|
||||
fill="url(#d3eb07ae-5182-43e6-857d-35c643af9034)"
|
||||
/>
|
||||
</svg>
|
||||
</>
|
||||
);
|
||||
@ -57,7 +57,7 @@ export const NxWorkflowsIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const NxCloudIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
export const NxCloudAnimatedIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
@ -75,6 +75,22 @@ export const NxCloudIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const NxCloudIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
stroke="currentColor"
|
||||
fill="transparent"
|
||||
{...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>
|
||||
);
|
||||
/**
|
||||
* Use `#143055` for a colored version.
|
||||
*/
|
||||
@ -90,3 +106,27 @@ export const NxIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
<path d="M11.987 14.138l-3.132 4.923-5.193-8.427-.012 8.822H0V4.544h3.691l5.247 8.833.005-3.998 3.044 4.759zm.601-5.761c.024-.048 0-3.784.008-3.833h-3.65c.002.059-.005 3.776-.003 3.833h3.645zm5.634 4.134a2.061 2.061 0 0 0-1.969 1.336 1.963 1.963 0 0 1 2.343-.739c.396.161.917.422 1.33.283a2.1 2.1 0 0 0-1.704-.88zm3.39 1.061c-.375-.13-.8-.277-1.109-.681-.06-.08-.116-.17-.176-.265a2.143 2.143 0 0 0-.533-.642c-.294-.216-.68-.322-1.18-.322a2.482 2.482 0 0 0-2.294 1.536 2.325 2.325 0 0 1 4.002.388.75.75 0 0 0 .836.334c.493-.105.46.36 1.203.518v-.133c-.003-.446-.246-.55-.75-.733zm2.024 1.266a.723.723 0 0 0 .347-.638c-.01-2.957-2.41-5.487-5.37-5.487a5.364 5.364 0 0 0-4.487 2.418c-.01-.026-1.522-2.39-1.538-2.418H8.943l3.463 5.423-3.379 5.32h3.54l1.54-2.366 1.568 2.366h3.541l-3.21-5.052a.7.7 0 0 1-.084-.32 2.69 2.69 0 0 1 2.69-2.691h.001c1.488 0 1.736.89 2.057 1.308.634.826 1.9.464 1.9 1.541a.707.707 0 0 0 1.066.596zm.35.133c-.173.372-.56.338-.755.639-.176.271.114.412.114.412s.337.156.538-.311c.104-.231.14-.488.103-.74z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const NxConsoleIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 344 221"
|
||||
{...props}
|
||||
>
|
||||
<title>Nx Console</title>
|
||||
<path d="M43.3535 191.192C40.8271 191.192 38.5414 190.639 36.4963 189.532C34.4752 188.401 32.8872 186.861 31.7323 184.912C30.5774 182.939 30 180.726 30 178.272C30 175.818 30.5774 173.616 31.7323 171.667C32.8872 169.694 34.4872 168.154 36.5324 167.048C38.5775 165.917 40.8632 165.351 43.3896 165.351C45.3625 165.351 47.167 165.688 48.8031 166.362C50.4392 167.011 51.8347 167.986 52.9896 169.285L50.6437 171.559C48.743 169.562 46.373 168.563 43.5339 168.563C41.6572 168.563 39.961 168.984 38.4452 169.827C36.9294 170.669 35.7384 171.836 34.8722 173.327C34.0301 174.795 33.609 176.443 33.609 178.272C33.609 180.1 34.0301 181.76 34.8722 183.252C35.7384 184.72 36.9294 185.875 38.4452 186.717C39.961 187.559 41.6572 187.98 43.5339 187.98C46.349 187.98 48.7189 186.969 50.6437 184.948L52.9896 187.222C51.8347 188.521 50.4272 189.508 48.767 190.182C47.1309 190.855 45.3264 191.192 43.3535 191.192Z" />
|
||||
<path d="M85.9764 191.192C83.426 191.192 81.1282 190.639 79.0831 189.532C77.038 188.401 75.4259 186.849 74.247 184.876C73.0921 182.903 72.5146 180.702 72.5146 178.272C72.5146 175.842 73.0921 173.64 74.247 171.667C75.4259 169.694 77.038 168.154 79.0831 167.048C81.1282 165.917 83.426 165.351 85.9764 165.351C88.5027 165.351 90.7884 165.917 92.8336 167.048C94.8787 168.154 96.4787 169.694 97.6336 171.667C98.7885 173.616 99.3659 175.818 99.3659 178.272C99.3659 180.726 98.7885 182.939 97.6336 184.912C96.4787 186.861 94.8787 188.401 92.8336 189.532C90.7884 190.639 88.5027 191.192 85.9764 191.192ZM85.9764 187.98C87.829 187.98 89.4892 187.559 90.9568 186.717C92.4486 185.875 93.6155 184.72 94.4576 183.252C95.3238 181.76 95.757 180.1 95.757 178.272C95.757 176.443 95.3238 174.795 94.4576 173.327C93.6155 171.836 92.4486 170.669 90.9568 169.827C89.4892 168.984 87.829 168.563 85.9764 168.563C84.1237 168.563 82.4395 168.984 80.9237 169.827C79.432 170.669 78.253 171.836 77.3868 173.327C76.5447 174.795 76.1237 176.443 76.1237 178.272C76.1237 180.1 76.5447 181.76 77.3868 183.252C78.253 184.72 79.432 185.875 80.9237 186.717C82.4395 187.559 84.1237 187.98 85.9764 187.98Z" />
|
||||
<path d="M143.571 165.64V190.903H140.612L125.454 172.064V190.903H121.845V165.64H124.804L139.962 184.479V165.64H143.571Z" />
|
||||
<path d="M175.458 191.192C173.557 191.192 171.717 190.903 169.936 190.326C168.18 189.724 166.796 188.954 165.786 188.016L167.121 185.201C168.084 186.067 169.311 186.777 170.802 187.33C172.318 187.86 173.87 188.124 175.458 188.124C177.551 188.124 179.115 187.776 180.15 187.078C181.184 186.356 181.702 185.406 181.702 184.227C181.702 183.36 181.413 182.663 180.836 182.133C180.282 181.58 179.584 181.159 178.742 180.87C177.924 180.581 176.757 180.257 175.241 179.896C173.341 179.439 171.801 178.981 170.622 178.524C169.467 178.067 168.469 177.369 167.626 176.431C166.808 175.469 166.399 174.181 166.399 172.569C166.399 171.222 166.748 170.007 167.446 168.924C168.168 167.842 169.25 166.975 170.694 166.326C172.138 165.676 173.93 165.351 176.072 165.351C177.563 165.351 179.031 165.544 180.475 165.929C181.918 166.314 183.157 166.867 184.192 167.589L183.001 170.476C181.942 169.802 180.811 169.297 179.608 168.96C178.405 168.599 177.226 168.419 176.072 168.419C174.026 168.419 172.487 168.792 171.452 169.538C170.441 170.284 169.936 171.246 169.936 172.425C169.936 173.291 170.225 174.001 170.802 174.554C171.38 175.084 172.09 175.505 172.932 175.818C173.798 176.106 174.965 176.419 176.432 176.756C178.333 177.213 179.861 177.67 181.016 178.127C182.171 178.584 183.157 179.282 183.975 180.221C184.817 181.159 185.239 182.422 185.239 184.01C185.239 185.333 184.878 186.548 184.156 187.655C183.434 188.738 182.339 189.604 180.872 190.254C179.404 190.879 177.599 191.192 175.458 191.192Z" />
|
||||
<path d="M218.878 191.192C216.328 191.192 214.03 190.639 211.985 189.532C209.94 188.401 208.328 186.849 207.149 184.876C205.994 182.903 205.416 180.702 205.416 178.272C205.416 175.842 205.994 173.64 207.149 171.667C208.328 169.694 209.94 168.154 211.985 167.048C214.03 165.917 216.328 165.351 218.878 165.351C221.405 165.351 223.69 165.917 225.735 167.048C227.781 168.154 229.381 169.694 230.535 171.667C231.69 173.616 232.268 175.818 232.268 178.272C232.268 180.726 231.69 182.939 230.535 184.912C229.381 186.861 227.781 188.401 225.735 189.532C223.69 190.639 221.405 191.192 218.878 191.192ZM218.878 187.98C220.731 187.98 222.391 187.559 223.859 186.717C225.35 185.875 226.517 184.72 227.359 183.252C228.226 181.76 228.659 180.1 228.659 178.272C228.659 176.443 228.226 174.795 227.359 173.327C226.517 171.836 225.35 170.669 223.859 169.827C222.391 168.984 220.731 168.563 218.878 168.563C217.026 168.563 215.341 168.984 213.826 169.827C212.334 170.669 211.155 171.836 210.289 173.327C209.447 174.795 209.026 176.443 209.026 178.272C209.026 180.1 209.447 181.76 210.289 183.252C211.155 184.72 212.334 185.875 213.826 186.717C215.341 187.559 217.026 187.98 218.878 187.98Z" />
|
||||
<path d="M254.747 165.64H258.356V187.763H272.034V190.903H254.747V165.64Z" />
|
||||
<path d="M311.472 187.763V190.903H293.138V165.64H310.966V168.78H296.747V176.539H309.414V179.607H296.747V187.763H311.472Z" />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M54.4938 30H30.2227V127.745H59.4861V79.9321L99.0951 127.745H123.366V30H94.1028V77.8129L54.4938 30ZM33.2303 124.737V33.0075H53.0798L97.1104 86.1577V33.0075H120.358V124.737H100.509L56.4785 71.5873V124.737H33.2303ZM153.172 30H186.673L220.749 78.3213L186.683 127.745H151.648L187.249 78.3219L153.172 30ZM158.973 33.0075L190.942 78.3404L157.521 124.737H185.103L217.083 78.341L185.113 33.0075H158.973ZM243.307 108.196H313.984V127.745H243.307V108.196ZM246.314 111.204V124.737H310.976V111.204H246.314Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
@ -91,6 +91,7 @@
|
||||
"@nx/nx-dev/models-package": ["nx-dev/models-package/src/index.ts"],
|
||||
"@nx/nx-dev/ui-animations": ["nx-dev/ui-animations/src/index.ts"],
|
||||
"@nx/nx-dev/ui-blog": ["nx-dev/ui-blog/src/index.ts"],
|
||||
"@nx/nx-dev/ui-brands": ["nx-dev/ui-brands/src/index.ts"],
|
||||
"@nx/nx-dev/ui-careers": ["nx-dev/ui-careers/src/index.ts"],
|
||||
"@nx/nx-dev/ui-cloud": ["nx-dev/ui-cloud/src/index.ts"],
|
||||
"@nx/nx-dev/ui-commands": ["nx-dev/ui-commands/src/index.ts"],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user